<template>
  <div v-if="hasdata==0">
  </div>
  <div class="shoe-box" v-else-if="hasdata==1">
    <section class="shoe-stroll" v-if="stroll&&stroll.length>0" :style="insq?'top:0;':''">
      <v-delay>
        <shoe-stroll :strolls="stroll"></shoe-stroll>
      </v-delay>
    </section>
    <v-delay>
      <v-list :load-handle='reload' :more-handle='loadmore' :more-handling='isLoading' :isend='isEnd'>
        <section class="shoe-banner">
          <img :src="banner|https" alt="">
          <div class="shoe-input flex-center" @click.prevent.stop="goSearch">
            <input type="text" value="请输入鞋名或者货号进行检索" readonly>
            <div class="flex-center">
              <img :src="searchIco" alt="">
            </div>
          </div>
        </section>
        <shoe-unit v-for="item in list" :key="item.id" :unit="item"></shoe-unit>
      </v-list>
    </v-delay>
  </div>
  <no-shoe v-else>没有鞋子信息</no-shoe>
</template>
<script>
  import ShoeStroll from '../../templates/ShoeStroll'
  import ShoeUnit from '../../templates/ShoeListUnit'
  import NoShoe from '../../templates/ShoeNodata'
  import { StockXHome, StockXSearch } from '../../../common/api/stock'
  import { ENUM, APP } from '../../../common/util'
  import { mapGetters } from 'vuex'
  export default {
    components: { ShoeStroll, ShoeUnit, NoShoe },
    data() {
      return {
        // insq: window.INSQ,
        hasdata: 0,
        searchIco: '//files.eyee.com/mcdn/static/img/search_gray.png', // require('../../../assets/img/search_gray.png'),
        list: [],
        isEnd: false,
        isLoading: false,
        pagedata: { sumcount: 0, pagesize: 0, pageindex: 1 }
      }
    },
    mounted() {
      let data = APP.shareData.shoeList
      this.initShare({ type: 0, info: { ...data }})
      if (!(this.stroll && this.stroll.length > 0 && this.banner != '')) {
        StockXHome().then(res => {
          console.log('StockXHome result', res)
          if (res && res.listroll && res.listroll.length > 0) {
            this.$store.dispatch('setStrollShoe', { stroll: res.listroll, banner: res.searchbg })
          }
        }).catch(e => { this.toast(e && e.msg ? e.msg : ('error:' + e)) })
      }
      let shoes = this.shoes
      if (shoes && shoes.length > 0) {
        this.list = shoes
        this.pagedata.pagesize = shoes.length
        this.hasdata = 1
      } else this.reload()
  },
    beforeDestroy() {
      let list = this.list.slice(0, this.pagedata.pagesize)
      this.$store.dispatch('setShoeList', list)
  },
    computed: {
      ...mapGetters({ insq: 'insq', stroll: 'strollShoe', banner: 'searchBanner', shoes: 'shoeList' })
    },
    methods: {
      reload($el) {
        this.list = []
        this.pagedata.pageindex = 1
        this.hasdata = 0
        this.req()
      },
      loadmore($el) {
        if (this.isEnd === true) {
          this.toast('已无更多')
        } else {
          this.pagedata.pageindex += 1
          this.req()
        }
      },
      req() {
        this.isLoading = true
        let page = this.pagedata
        StockXSearch({ pageindex: page.pageindex }).then(res => {
          console.log('StockXList result', res)
          if (res) {
            if (res.list && res.list.length > 0) {
              this.hasdata = 1
              if (res.pageindex == 1) this.list = res.list
              else this.list.push(...res.list)
            } else this.hasdata = 2
            if (res.pageindex > 0) page.pageindex = res.pageindex
            if (res.sumcount > -1) page.sumcount = res.sumcount
            if (res.pagesize > -1) page.pagesize = res.pagesize
            if (page.pageindex * page.pagesize >= page.sumcount) this.isEnd = true
          } else { this.hasdata = 2; this.toast('加载失败') }
          this.isLoading = false
        }).catch(e => { this.hasdata = 2; this.isLoading = false; this.toast(e && e.msg ? e.msg : ('error:' + e)) })
      },
      goSearch() {
        this.$router.push('/search/' + ENUM.SearchType.newsShoe.val)
      }
    }
  }

</script>
<style scoped>
  .shoe-box {
    position: relative;
    padding-top: 48px;
  }

  .shoe-stroll {
    position: fixed;
    top: 48px;
    left: 0;
    width: 100%;
    height: 48px;
    overflow: hidden;
    background-color: #fff;
    z-index: 99;
  }

  .shoe-banner {
    position: relative;
    min-height: 100px;
  }

  .shoe-banner img {
    width: 100%;
  }

  .shoe-input {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 85%;
    background-color: #fff;
    transform: translateX(-50%);
    border: 1px solid #ccc;
    justify-content: space-around;
  }

  .shoe-input input {
    width: 90%;
    font-size: 10px;
    height: 30px;
    margin-left: 8px;
    color: #ccc;
  }

  .shoe-input div {
    width: 30px;
    height: 26px;
    border-left: 1px solid #ccc;
  }

  .shoe-input img {
    width: 16px;
  }
</style>
